<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位广告条</title>
    <style>
        .top {
            background-color: #5aa4ae;
            height: 120px;
            font-size: 30px;
            color: #fff;
            position: fixed;
            top: 0;
            width: 100vw;
        }

        .left, .right {
            width: 60px;
            height: 200px;
            position: fixed;;
            top: 300px;
        }

        .left {
            background-color: #fff799;
            left: 20px;
        }

        .right {
            background-color: #f35336;
            right: 20px;
        }

        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid aspernatur assumenda, corporis debitis,
        dolores eaque esse neque omnis perspiciatis placeat quasi recusandae rem repellat repudiandae similique tempore
        tenetur vel!
    </div>
    <div>Architecto, consequatur esse facere fugiat perferendis ullam. Ab, ad aliquid cumque eligendi exercitationem id
        ipsam laboriosam nemo non nostrum obcaecati pariatur perspiciatis praesentium quam quibusdam, quo velit veniam,
        vitae voluptatem!
    </div>
    <div>Atque autem doloribus eaque omnis. Accusamus ad aliquid animi atque aut corporis dignissimos eos eum in iusto
        libero numquam odio officia optio placeat praesentium quia quisquam, rem rerum sapiente voluptas!
    </div>
    <div>Consectetur, mollitia, optio! Amet, esse eum laudantium neque officiis repellat reprehenderit sunt. Alias amet
        dicta est laudantium maiores obcaecati vitae! Dolorem, doloribus eaque fugit illum labore nisi quidem sapiente
        suscipit.
    </div>
    <div>A, ad at aut cum delectus magnam non quibusdam. Ad alias at consequatur dolorem eaque explicabo, ipsum, itaque
        magni nisi pariatur quasi repellendus tempora velit vero voluptate! Fugit placeat, quia.
    </div>
    <div>Assumenda at consequatur consequuntur culpa distinctio dolorum ea earum, eligendi error excepturi id illum
        incidunt iusto laboriosam molestias natus neque praesentium quia ratione repellat rerum saepe, temporibus
        tenetur
        velit voluptatibus.
    </div>
    <div>Alias, officia, reiciendis! Amet asperiores cum, cumque dolore, doloremque ducimus eius eos excepturi
        laudantium
        maiores nam nisi praesentium quae. Illum, maxime, quo? Exercitationem harum numquam quaerat quibusdam quo sed
        temporibus.
    </div>
    <div>Ad adipisci amet asperiores aut earum esse eum explicabo harum id iste minus, modi nostrum, numquam officia
        optio
        pariatur praesentium, quasi quos recusandae rem repellat sequi sint suscipit temporibus voluptatum.
    </div>
    <div>Aliquid beatae, cum cumque debitis distinctio ea eligendi eos eveniet harum id inventore ipsa iure magni
        mollitia
        natus nulla officiis, quia quidem repellat repudiandae rerum suscipit tempora ullam velit voluptas?
    </div>
    <div>Delectus eveniet nihil omnis quae tempora veniam voluptates. Amet aut est omnis repellendus. Accusantium alias
        autem beatae distinctio et ipsum iusto labore laudantium, omnis quasi repellat, reprehenderit, velit veritatis
        voluptas.
    </div>
    <div>Aperiam at cumque dolores ducimus eius enim, eos eum fugit nemo nobis odio omnis pariatur possimus quas
        quibusdam
        quidem quisquam quo reiciendis rem repellat repudiandae sequi temporibus totam ut voluptatem.
    </div>
    <div>Dolore ea exercitationem id incidunt ipsam minus nam natus perferendis porro sapiente, sit totam ut voluptatem!
        Alias aliquam deserunt, facere incidunt numquam perferendis placeat saepe. Aperiam dolor sequi tempore ut.
    </div>
    <div>Aperiam at deleniti dolore doloribus eaque est eveniet explicabo, laudantium minima mollitia, neque possimus
        praesentium similique voluptate voluptates. Accusantium animi beatae culpa doloremque dolores ex rem suscipit
        tempore temporibus voluptate!
    </div>
    <div>Distinctio et laborum nostrum reiciendis voluptatem! Ad alias, assumenda aut consequatur culpa deserunt id ipsa
        maxime, modi molestias quisquam voluptatum. Consequuntur debitis hic ipsam maiores modi nemo non officiis
        pariatur?
    </div>
    <div>Aperiam fuga fugit hic in laudantium mollitia quibusdam rem rerum saepe ut! Accusantium debitis eaque esse et
        ex,
        inventore, laborum magnam maxime, minus molestiae nisi praesentium quaerat quia sit sunt.
    </div>
    <div>Accusamus aliquam aperiam at corporis culpa cum deserunt dolor dolorum earum eligendi enim harum iste, magni
        nisi
        officia, omnis repellat totam ullam vero voluptas. Alias cupiditate ex nemo quibusdam repellat.
    </div>
    <div>Aperiam delectus et ex excepturi, facere ipsam magnam mollitia officia omnis provident soluta totam. Architecto
        atque consectetur consequuntur eligendi error et inventore iure natus pariatur praesentium provident reiciendis,
        rerum voluptas.
    </div>
    <div>Aliquam animi assumenda atque cumque, dicta, distinctio explicabo facere id labore maxime modi natus obcaecati
        officia perferendis porro repellat, sint veritatis voluptatum. Commodi eaque, eos est laboriosam nam repellendus
        ullam.
    </div>
    <div>Asperiores atque, consequatur deleniti deserunt doloremque dolores dolorum eligendi enim illum nobis officiis
        quam quo similique unde voluptates! A dolorum eveniet harum obcaecati odit optio, perferendis possimus
        praesentium
        rem rerum.
    </div>
    <div>Autem consequatur odio tempora. Animi atque consequuntur culpa, cupiditate dolorem ducimus est ex fuga
        inventore
        ipsum magni maxime modi molestiae officiis optio porro praesentium provident quas quidem recusandae rem
        suscipit.
    </div>
    <div>Aliquid cum deleniti dicta expedita, fuga harum impedit, in incidunt ipsam labore quis, reiciendis rerum sint
        sunt voluptatibus! Architecto assumenda dolorem earum expedita nostrum quam quas, repellat sunt unde voluptatem.
    </div>
    <div>A ad aliquid commodi consequatur consequuntur corporis cum cupiditate ex, expedita explicabo facere in labore
        minus modi non officia placeat quod quos, repellendus similique sint ut vel velit. Minus, quidem.
    </div>
    <div>Deserunt distinctio ea, eos expedita illum laboriosam laborum quam quis recusandae? Accusamus, animi
        cupiditate,
        deleniti dolorem eligendi error incidunt itaque labore laboriosam officiis pariatur quae, quo recusandae rerum
        sunt
        vel?
    </div>
    <div>Accusantium, aliquam amet facilis hic molestiae natus nostrum quidem quos velit vitae. Aperiam consectetur
        deleniti deserunt excepturi natus, nihil quae quis. Aliquam blanditiis culpa deserunt ducimus natus, provident
        veritatis voluptas?
    </div>
    <div>Autem et minus neque omnis quidem quis soluta veniam. Asperiores aspernatur, atque dignissimos error ex facilis
        hic id illum iste iusto maiores officia optio, quae quidem rerum sed ut veniam?
    </div>
    <div>Ab alias aliquam, amet animi autem dolorem ea enim, fugiat harum hic id illo impedit ipsa ipsam modi molestias
        nemo nisi praesentium quae quas quibusdam rem, saepe soluta tenetur voluptate!
    </div>
    <div>Dolore doloribus magnam magni natus sit! A animi architecto at, commodi consequatur corporis delectus
        distinctio
        doloremque dolores excepturi hic iusto labore libero neque quod reprehenderit, rerum sit suscipit vel,
        voluptatum!
    </div>
    <div>Ad at aut corporis dolores et hic laboriosam minus, odio provident sunt tenetur voluptatibus! Aliquam at esse
        eum
        ipsum libero provident, qui, quo rem, sit soluta vero vitae voluptas voluptatibus.
    </div>
    <div>Amet, commodi delectus, dolor earum enim eos esse expedita fugit id ipsa laudantium maiores minus, molestias
        necessitatibus quae quis repellat similique tenetur veniam veritatis. Alias dolor est nisi repellat similique.
    </div>
    <div>Autem commodi delectus earum fuga quo. Consequatur cumque dolorem dolorum eaque, expedita explicabo fugit
        impedit
        laudantium magni nulla repellat sed sunt voluptatem voluptatibus voluptatum. Exercitationem, ipsam maxime?
        Distinctio, ex vitae.
    </div>
    <div>Ab cum doloribus ducimus eius eos, excepturi id laborum modi nemo odio officia sed soluta, tempore ut, vel?
        Atque
        culpa dolores est laborum laudantium quisquam quo ullam veniam veritatis voluptate?
    </div>
    <div>A asperiores doloremque incidunt maiores molestias numquam voluptate. Ad adipisci, amet animi fugit harum nihil
        odit pariatur, porro provident quae qui quia quisquam recusandae reprehenderit, sed tempore tenetur veritatis
        voluptates.
    </div>
    <div>Architecto atque corporis cum doloremque iste iure quibusdam temporibus vero vitae? Aliquid amet blanditiis
        ipsa
        molestiae nemo optio quidem quo similique tempore voluptatibus! Adipisci, assumenda eaque repudiandae rerum
        saepe
        voluptatem!
    </div>
    <div>Commodi cumque dolorem excepturi facere labore laudantium, modi, nobis numquam, odio sunt suscipit tempora
        ullam
        unde. Asperiores, aut consectetur dignissimos dolore ducimus fugiat inventore ipsa iusto, magnam quaerat rem
        suscipit!
    </div>
    <div>Itaque iure iusto omnis optio quis! Accusamus, blanditiis commodi cumque eius error harum in labore maiores
        minus
        necessitatibus perspiciatis quibusdam quisquam ratione tempora unde! Atque blanditiis cum id pariatur quo.
    </div>
    <div>Ab, blanditiis consequuntur dolor enim et facilis laboriosam nobis porro quidem recusandae reiciendis rem
        tempora
        tempore, ullam voluptatum. Alias commodi consectetur, delectus et impedit ipsa maiores non numquam quasi vitae!
    </div>
    <div>Atque commodi consequuntur corporis dolorem doloremque eveniet ex excepturi explicabo fugiat, fugit illo ipsam
        laudantium libero magni maiores neque obcaecati quaerat quo reiciendis suscipit tempora, tempore vero
        voluptates.
        Accusantium, natus?
    </div>
    <div>Architecto asperiores consequatur dolorem, excepturi impedit incidunt mollitia, neque nesciunt nihil numquam
        pariatur quas qui sed velit voluptates! Dignissimos eligendi expedita ipsa numquam, possimus quod sequi
        temporibus
        unde vero voluptate?
    </div>
    <div>Ab consequatur dolores earum eveniet, mollitia nihil nostrum officiis quos recusandae repellendus. Amet dolorem
        ea illo laborum tenetur unde vero! A aliquid blanditiis culpa dolor dolores doloribus, harum optio reiciendis.
    </div>
    <div>Aliquid architecto, assumenda ducimus nam quasi quos repudiandae unde ut vero! Autem consequuntur delectus
        error
        impedit labore, libero magni odit, officia praesentium, quibusdam quo quod rerum sequi sunt veniam. Magni.
    </div>
    <div>Ipsa libero neque omnis possimus quidem reiciendis, ut. Aspernatur ex laudantium molestiae necessitatibus
        sapiente veritatis voluptatibus! Accusamus architecto delectus, earum fuga incidunt laborum laudantium
        molestias,
        nisi nostrum quae quis, recusandae.
    </div>
    <div>Cumque perspiciatis repellendus voluptatum. Fugiat illum iure iusto laudantium necessitatibus ut vero! Nemo
        nobis
        officiis provident recusandae rerum? Asperiores culpa ducimus labore molestiae perferendis, qui repellat.
        Deserunt
        earum odio sequi?
    </div>
    <div>Aliquam aliquid, amet assumenda corporis deserunt doloribus ex fugit harum laborum natus nihil nisi nostrum
        nulla
        quidem quis repudiandae saepe. A aliquam aut dolorum et inventore ipsam labore possimus quam?
    </div>
    <div>Ab amet at autem commodi consequatur cum cumque dolores ea eligendi hic, maxime minus nemo neque numquam
        officiis
        porro possimus praesentium qui, ratione temporibus unde vero voluptas voluptatibus! Doloribus, possimus.
    </div>
    <div>Ab eos, repellendus. Aliquam amet commodi dignissimos eum hic ipsam minima minus molestias odio, officiis,
        quos,
        sit temporibus ut voluptatem voluptates? Commodi eaque enim esse illum itaque nam, velit voluptatibus.
    </div>
    <div>Adipisci debitis distinctio dolorum est eveniet exercitationem facere fugiat fugit inventore itaque iure
        possimus
        praesentium quaerat, quidem quis soluta, tempora, temporibus voluptatibus. Deleniti optio quidem, quo sint
        veniam
        voluptas voluptatibus.
    </div>
    <div>Harum, in, sint. Culpa deleniti dicta est impedit labore laudantium libero minus similique ullam, vitae.
        Adipisci
        aliquid, autem blanditiis doloribus laborum quasi rem repellendus vel vitae voluptates. Dolores quibusdam, sed.
    </div>
    <div>Ad asperiores commodi consectetur cupiditate dicta est et fugit incidunt, magni natus neque nesciunt provident
        quibusdam quidem, quisquam repellat saepe sequi, similique tempore voluptatibus. A, ab, quia? Quos sequi, vitae?
    </div>
    <div>Atque beatae consectetur consequuntur cumque delectus dolores eligendi est fugit ipsam natus, nihil nisi, odit
        pariatur quas ratione sunt tempora. Consectetur dolor eos est ipsum libero maxime officiis reprehenderit
        repudiandae?
    </div>
    <div>Adipisci aspernatur blanditiis debitis dolores earum esse, incidunt laboriosam natus nisi nobis obcaecati omnis
        quasi vero. Animi at, distinctio dolores ducimus, earum eum facilis iusto maxime omnis rem repellendus tenetur?
    </div>
    <div>Ad amet, architecto eius, eveniet explicabo fuga incidunt ipsa, libero minima minus nemo nesciunt nulla quas
        quibusdam repellendus sapiente soluta vero. Expedita, explicabo, nemo! Laudantium magnam natus nihil praesentium
        sint!
    </div>
    <div>Architecto cupiditate est explicabo harum, illo laborum minus neque? Accusamus eligendi fugiat itaque
        perspiciatis recusandae. Accusantium deleniti ea eius explicabo iure laudantium nihil, placeat provident qui
        repellat reprehenderit, repudiandae sit.
    </div>
    <div>Animi dolores explicabo, magni reiciendis rem repellat tempora. Accusantium ad deleniti dolores, earum, eos
        laudantium libero nobis numquam officia omnis provident quaerat quasi ullam! Eos incidunt nesciunt quis quisquam
        quod?
    </div>
    <div>Similique, sit, ullam? Alias animi architecto assumenda at cumque delectus doloremque doloribus dolorum ea eum
        itaque modi necessitatibus, nemo, obcaecati odio officiis quia repellat similique tenetur ullam ut vero
        voluptas.
    </div>
    <div>Eveniet labore minus molestiae nesciunt qui sint soluta, vitae. Accusamus aliquid blanditiis expedita libero,
        minima molestias neque odio officia omnis provident, quas rem soluta temporibus ullam voluptatum! Molestiae,
        neque,
        tempora.
    </div>
    <div>Ab, ad asperiores assumenda deleniti dignissimos esse, ex fugit inventore possimus provident quaerat ullam
        veritatis. Assumenda at beatae consequatur cupiditate illo, maxime nemo nobis quam repellendus, rerum saepe
        veniam
        veritatis.
    </div>
    <div>Amet error, numquam. Ad aliquid at, cum eligendi ex excepturi explicabo harum in labore, neque rem repellendus!
        Alias amet, error exercitationem fuga id ipsam laudantium minus perferendis praesentium tempora totam.
    </div>
    <div>Aliquid aperiam culpa cupiditate dolores, earum eius id impedit in molestias numquam odit quos reprehenderit,
        totam? Aspernatur commodi consequatur deserunt ducimus fugit illo, laboriosam, odit optio perferendis sint unde
        vitae.
    </div>
    <div>Accusantium blanditiis cupiditate distinctio, dolor dolorem, eius esse et explicabo iste iusto libero maiores
        molestiae nemo nesciunt nisi odio perspiciatis provident quasi reiciendis, repudiandae sed tenetur totam ut
        voluptates voluptatum.
    </div>
    <div>Eaque explicabo harum laboriosam maxime minus neque nesciunt nulla, officia optio quis sequi voluptates? Animi
        asperiores aut commodi esse, in incidunt iusto laudantium magni perspiciatis quaerat quasi, quo quod, vero.
    </div>
</div>
</body>
</html>